<template>
    <!-- 通过底部标签切换显示不同组件 -->
    <router-view/>
    <!-- 底部标签页 -->
    <van-tabbar v-model="active">
        <van-tabbar-item name="/main/home" icon="home-o">主页</van-tabbar-item>
        <van-tabbar-item name="/main/search" icon="search">发现</van-tabbar-item>
        <van-tabbar-item name="/main/order" icon="friends-o">订单</van-tabbar-item>
        <van-tabbar-item name="/main/user" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import {ref,watch,getCurrentInstance, onMounted} from 'vue';
import store from '@/store';

   const {proxy} = getCurrentInstance();

const active = ref('/main/home');

 watch(active,(newValue,oldValue)=>{
    proxy.$router.push(active.value);
 })

 watch(store.state.activeTab,(n,o)=>{
    active.value = store.state.activeTab;
 })

</script>

<style>
</style>